<?php
    use Rudra\Container\Facades\Rudra;
?>
<main>
  <div class="container py-4">
    <header class="pb-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
          <img src="<?= Rudra::config()->get('url') ?>/images/rudra.png" alt="Rudra Framework" width="5%">
        <span class="fs-4">Rudra Framework</span>
      </a>
    </header>

    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">Getting started</h1>
        <p class="col-md-8 fs-4">
          Install:
        <pre><code class="language-css">composer create-project --prefer-dist rudra/framework=dev-master newapp
cd newapp
composer dumpautoload -o</code></pre>
        </p>
        <p class="col-md-8 fs-4">
        Setup your database in <code class="language-css">config/setting.local.yml</code> for local database, <code class="language-css">config/setting.production.yml</code>  for production:
        <pre><code class="language-php">dsn: sqlite:/path/to/rudra.sqlite</code></pre>
        <pre><code class="language-php">dsn: mysql:dbname=rudra_mysql;host=127.0.0.1</code></pre>
        <pre><code class="language-php">dsn: pgsql:host=127.0.0.1;port=5432;dbname=rudra_postgres</code></pre>
        </p>
        <p class="col-md-8 fs-4">

        Specify database user details:
        <pre><code class="language-php">username: jagepard</code></pre>
        <pre><code class="language-php">password: password</code></pre>

        And run development server:
        <pre><code class="language-css">php rudra serve</code></pre>
        or
        <pre><code class="language-css">php rudra run</code></pre>
        </p>
        <button class="btn btn-primary btn-lg" type="button">Example button</button>
      </div>
    </div>

    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-white bg-dark rounded-3">
          <h2>Change the background</h2>
          <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
          <button class="btn btn-outline-light" type="button">Example button</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 bg-light border rounded-3">
          <h2>Add borders</h2>
          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
    </div>

    <footer class="pt-3 mt-4 text-muted border-top">
      &copy; <a href="https://github.com/Jagepard">Jagepard</a> <?= date('Y') ?>
    </footer>
  </div>
</main>
